<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <form class="add-comment">
            <textarea class="comment-text"></textarea><br>
            <button type="button" class="btn btn-primary" value="submit">Post Comment</button>
        </form>
        <div class="comment"></div>
    </div>
    <script>
        const addCommentForm = document.querySelector('.add-comment');
        const textarea = document.querySelector('.comment-text');
        const commentDiv = document.querySelector('.comment');
        const user = 'Mary';

        addCommentForm.addEventListener('submit', function (event) {
            event.preventDefault();
            const newConmment = textarea.value.trim();
            if (newConmment) {
                commentDiv.innerHTML = `
            <div class=" comment-header">${user}</div>
            <div class="comment-body">${textarea.value}</div>
            `
                textarea.value = ``;
            }
        })
    </script>
</body>

</html>